<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        body {
            background: #363;
        }
        .wave {
            position: absolute;
            top: calc((100% - 0px)/2);
            left: calc((100% - 0px)/2);
            width: 30px;
            height: 30px;
            border-radius: 300px;
            background: url(img/old-street.jpg);
            background-attachment: fixed;
            background-position: center center;
        }
        .wave0 {
            z-index: 2;
            background-size: auto 106%;
            -webkit-animation: w 1s forwards;
        }
        .wave1 {
            z-index: 3;
            background-size: auto 102%;
            -webkit-animation: w 1s 0.2s forwards;
        }
        .wave2 {
            z-index: 4;
            background-size: auto 104%;
            -webkit-animation: w 1s 0.4s forwards;
        }
        .wave3 {
            z-index: 5;
            background-size: auto 101%;
            -webkit-animation: w 1s 0.5s forwards;
        }
        .wave4 {
            z-index: 6;
            background-size: auto 102%;
            -webkit-animation: w 1s 0.8s forwards;
        }
        .wave5 {
            z-index: 7;
            background-size: auto 100%;
            -webkit-animation: w 1s 1s forwards;
        }
        @-webkit-keyframes w {
            0% {
                top: calc((100% - 30px)/2);
                left: calc((100% - 30px)/2);
                width: 30px;
                height: 30px;
            }
            100% {
                top: calc((100% - 300px)/2);
                left: calc((100% - 300px)/2);
                width: 300px;
                height: 300px;
            }
        }
    </style>
</head>
<body>
<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>
</body>
</html>
<script>
    var mx, my, timer;
    var z = 2;
    $(document).on('click', function(e) {
        mx = e.pageX;
        my = e.pageY;
        z = z + 1;
        _wave(mx, my, z);
    });

    function _wave(i, j, k) {
        $('.ui-content').prepend(
                '<div class="wave-position water' + k + '" style="z-index:' + k + ';top:' + (j - 150) + 'px;left:' + (i - 150) + 'px;">' +
                '<div class="wave-body">' +
                '<div class="wave wave5"></div>' +
                '<div class="wave wave4"></div>' +
                '<div class="wave wave3"></div>' +
                '<div class="wave wave2"></div>' +
                '<div class="wave wave1"></div>' +
                '<div class="wave wave0"></div>' +
                '</div>' +
                '</div>'
        );
        setTimeout(function() {
            $('.water' + k).remove();
        }, 3000);
    }
</script>